<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/axios.min.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">	
		<br>
		
			门店名称：<input type="text" v-model="name"> <br>
			门店类型：<input type="text" v-model="types"> <br>
			门店联系方式：<input type="text" v-model="tel"> <br>
			门店地址：<input type="text" v-model="address"> <br>
			<input type="button"  value="添加" @click="add()" class="btn btn-success">

		
		<table class="table">
			<tr>
				<td>门店编号</td>
				<td>门店名称</td>
				<td>门店类型</td>
				<td>门店联系方式</td>
				<td>门店地址</td>
				<td>操作</td>
			</tr>
			
			<tr v-for="(v,i) in stos">
				<td>{{v.id}}</td>
				<td>{{v.name}}</td>
				<td>{{v.types}}</td>
				<td>{{v.tel}}</td>
				<td>{{v.address}}</td>
				<td><button type="button" class="btn btn-primary" @click="Update()">修改</button></td>
			</tr>
		</table>
		<div align="center">
		       <input type="button" value="首页" @click="getpage(1)">
			   <input type="button" value="上一页" @click="getpage(page-1)">
				<input type="button" :value="i" v-for="i in sumpage" @click="getpage(i)">
				<input type="button" value="下一页" @click="getpage(page+1)">
				<input type="button" value="尾页" @click="getpage(sumpage)">
		</div>
		</div>
	</body>
</html>
<script>
var app=new Vue({
	el:"#app",
	data:{
		stos:[],
		name:"",
		types:"",
		tel:"",
		address:"",
		
		page:"",
		size:"",
		count:"",
		sumpage:"",
	},methods:{
		add(){
			var data =new FormData()
			data.append("name",this.name)
			data.append("types",this.types)
			data.append("tel",this.tel)
			data.append("address",this.address)
			axios.post("http://127.0.0.1:8080/add",data).then(function(res){
				alert(res.data.msg)
				location.reload()
			} )
		},//add
		
		getpage(page){
			axios.get("http://127.0.0.1:8080/list?page="+page).then(function(res){
					// console.log(res.data.data)
					app.stos=res.data.data.stos
					app.page=res.data.data.page
			
				} )
		}, //分页
	},created:function(){
		axios.get("http://127.0.0.1:8080/list").then(function(res){
			// console.log(res.data.data)
			app.stos=res.data.data.stos
			app.page=res.data.data.page
			app.size=res.data.data.size
			app.count=res.data.data.count
			app.sumpage=res.data.data.sumpage
		} )
	}
})
</script>